<template>
	<transition name="move">
	<div  class="ff-food" ref="fla">
		<div>
		<div class="ff-content">
			<div class="img-header">
				<img :src="food.src  | imgurl" />
			</div>
			<div class="ff-text">
				<h1 class="te-title">{{food.listName}}</h1>
				<!--<div class="te-detail">3
					<span class="sell-count">月售{{food.sellCount}}份</span><span class="rating">好评率{{food.rating}}%</span>
				</div>-->
				
				
				<div v-if="food.listin.length==1">
				
				    <div class="g-new">￥{{foodinfo.price}}</div>
				    <!--<span class="g-old" v-show="food.oldPrice">￥{{food.oldPrice}}</span>-->
				
				 <div class="cart-wraper">
		    	<change :food="foodinfo"></change>
		    </div>
		    <div class="buy" v-show="!foodinfo.num || foodinfo.num==0" @click="addfirst(0)">加入购物车</div>
		    </div>
		    
		    
		    <div v-else class="havespecif">
		    	<ul>
		    		<li v-for='(item,index) in food.listin' :class="{focus:index==i}" @click="chose(index)">
		    			{{item.listName}}
		    		</li>
		    	</ul>
				<div class="choseprice">￥{{foodinfo.price}}</div>
		    	 <div class="cart-wraper">
		    	<change :food="foodinfo"></change>
		    </div>
		    	<div class="buy" v-show="!foodinfo.num || foodinfo.num==0" @click="addfirst(i)">加入购物车</div>
		    </div>
		    
		    
			</div>
		</div>
		<h1 class="s-title">商品描述</h1>
		<h1 class="s-title1">{{food.listin[i].fooddescriotion | whetherhave}}</h1>
		<!--<div class="inf" v-show="food.info">
			<h1 class="inf-title">商品信息</h1>
			<p class="inf-text">{{food.info}}</p>
		</div>
		<h1 class="s-title">商品描述</h1>
		<div class="s-rating">
			<ratingselect :selectType="selectType" :onlyContent="onlyContent" :desc="desc" :rating="food.ratings"></ratingselect>
		</div> -->
		</div>
		<div class="back">
					<i class="i icon-arrow_lift" @click="ret"></i>
				</div>
	</div>
	</transition>
</template>

<script>
	import ratingselect from '../shopcart/ratingselect'
	import split from '../shopcart/split'
	import BScroll from 'better-scroll'
	import change from '../shopcart/change'
	const ALL=2;
	export default{
		data(){
			return{
				selectType:ALL,
				onlyContent:true,
				i:0,
				desc:{
					all:'全部',
					positive:'推荐',
					negative:'吐槽'
				}
			}
		},
		props:['food'],
		computed:{
			foodinfo:function(){
				return this.food.listin[this.i]
			}
		},
		methods:{
			radom:function(min, max){
				return 	parseFloat(Math.random() * (max - min) + min).toFixed(2)
				},
			chose:function(index){
				this.i=index
			},
			addfirst:function(index){
				
				this.$store.commit("getjustprice",this.food.listin[index].price)
				this.food.listin[index].num++;
						if(this.$store.state.doubleused&&!this.$store.state.doubleuseded&&!this.$store.state.doublenumused){
								var money=this.radom(this.food.listin[index].firstGearMin,this.food.listin[index].firstGearMax)
							var money1=this.radom(this.food.listin[index].firstGearMin,this.food.listin[index].firstGearMax)
							if((money*2*this.food.listin[index].price).toFixed(2)==0){
								return
							}
							
							this.food.listin[index].hongbao.push((money*this.food.listin[index].price).toFixed(2))
							this.food.listin[index].hongbao.push((money1*this.food.listin[index].price).toFixed(2))
							this.food.listin[index].doublehongbao=true
							this.$store.commit("addhongbao",[(money*this.food.listin[index].price).toFixed(2),(money1*this.food.listin[index].price).toFixed(2)])
							this.$store.commit("getdoubleuseded")
						}
						else if(this.$store.state.doublenumused&&!this.$store.state.doublenumuseded&&(this.$store.state.totalcount+1)>=sessionStorage.doubletype){
								var money=this.radom(this.food.listin[index].firstGearMin,this.food.listin[index].firstGearMax)
								var money1=this.radom(this.food.listin[index].firstGearMin,this.food.listin[index].firstGearMax)
								if((money*2*this.food.listin[index].price).toFixed(2)==0){
								return
							}
							this.food.listin[index].hongbao.push((money*this.food.listin[index].price).toFixed(2))
							this.food.listin[index].hongbao.push((money1*this.food.listin[index].price).toFixed(2))
							this.food.listin[index].doublehongbao=true
							this.$store.commit("addhongbao",[(money*this.food.listin[index].price).toFixed(2),(money1*this.food.listin[index].price).toFixed(2)])
							this.$store.commit("getdoublenumuseded")
						}
						else if(this.$store.state.hongbaonum==(sessionStorage.bignum-1)&&sessionStorage.tape>0&&!this.$store.state.jingxiused){
								var money=this.radom(this.food.listin[index].secondGearMin,this.food.listin[index].secondGearMax)
							if((money*this.food.listin[index].price).toFixed(2)==0){
								return
							}
							this.$store.commit("getotherhongbao","（惊喜）")
							this.$store.commit("getjingxiused",money*this.food.listin[index].price)
							this.food.listin[index].jingxiused=money*this.food.listin[index].price
							this.$store.commit("addhongbao",(money*this.food.listin[index].price).toFixed(2))
						}
						else{
							
							var money=this.radom(this.food.listin[index].firstGearMin,this.food.listin[index].firstGearMax)
							if((money*this.food.listin[index].price).toFixed(2)==0){
								return
							}
							this.food.listin[index].hongbao.push((money*this.food.listin[index].price).toFixed(2))
							this.$store.commit("addhongbao",(money*this.food.listin[index].price).toFixed(2))
						}
					
			},
			show1:function(){
				var _this=this
				this.i=0
				this.$nextTick(function(){
					if(!_this.scroll){
						_this.scroll=new BScroll(_this.$refs.fla,{
							click:true
						});
					}
					else {
						_this.scroll.refresh();
					}
				});
			},
			ret:function(){
				this.$emit("change")
			}
		},
		filters: {
        imgurl: function(value) {
            return 'http://www.dadu999.com'+value;
        },
        whetherhave:function(value){
        	if(value){
        		return value
        	}
        	else{
        		return "该商品暂无描述信息"
        	}
        }
    },
		components:{
			change,
			split,
			ratingselect
		}
	}
</script>

<style scoped="scoped">
	.havespecif ul li.focus{
		border: 1px solid #00a0dc;
	  background :#00a0dc;
	  color: white;
	}
	.havespecif{
		width: 100%;
		
	}
	.havespecif ul{
		overflow:auto;
		background:white;
	    margin-top:0.3rem;
	    overflow:auto;
	    overflow:hidden;
	    overflow:auto ;
	}
	.havespecif ul li{
		 background :white;
	      border: 1px solid white;
	      padding :0 0.1rem;
	      line-height: 0.6rem;
	      min-width: 1.4rem;
	      color: black;
	      margin-left: 0.2rem;
	      font-size: 0.3rem;
	      margin-top :0.2rem;
	      border-radius :0.1rem ;
	      float :left;
	      text-align: center;
	      height :0.6rem;
	      transition: 0.5s;
	}
	.choseprice{
		position: absolute;
		left: 0.6rem;
		bottom: 15px;
		font-size: 0.5rem;
		line-height: 30px;
		color: #db2244;
	}
	
	.ff-food{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 1rem;
		z-index: 30;
		width: 100%;
		background: #FFFFFF;
	}
	.move-enter-active,.move-leave-active{
		transition: all 0.3s linear; 
	}
	.move-enter,.move-leave-to{
		transform: translateX(100%);
	}
	.img-header{
		position: relative;
		width: 100%;
		height: 0;
		padding-top: 90%;
		
	}
	.img-header img{
		position:absolute ;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
	}
	.back{
		position: fixed;
		top: 10px;
		left: 5px;
		z-index: 1000;
		
	}
	.i{
		display: block;
		padding: 10px;
		font-size: 20px;
		color: white;
		border-radius: 50%;
		background:rgba(150,150,150,0.3)
	}
	.ff-text{
		position: relative;
		padding: 0.3rem 0.6rem ;
		padding-bottom: 1.3rem;
		border-bottom: 1px solid #dddddd
	}
	.te-title{
		font-weight: 700;
		line-height: 14px;
		font-size: 17px;
		color: black;
		text-align: left;
	}
	.te-detail{
		margin-bottom: 18px;
		line-height: 10px;
		font-size: 0;
		height: 10px;
	}
	.sell-count,.rating{
		font-size: 10px;
		color: rgb(147,153,159);
		margin-right: 12px;
	}
	.g-new{
		position: absolute;
		left: 0.6rem;
		bottom: 0.5rem;
		margin-right: 8px;
		font-size: 0.5rem;
		color: rgb(240,20,20);
		
	}
	.g-old{
		text-decoration: line-through;
		font-size: 10px;
		color: rgb(147,153,159);
	}
	.cart-wraper{
		position: absolute;
		right: 0.5rem;
		bottom: 12px;
	}
	.buy{
		position: absolute;
		right: 11px;
		bottom: 11px;
		z-index: 10;
		line-height: 30px;
		padding: 1px,12px;
		box-sizing: border-box;
		border-radius:12px ;
		font-size: 15px;
		color: #FFFFFF;
		background: RGB(255,97,3);
	}
	.inf{
		padding: 18px;
		
	}
	.inf-title{
		line-height:14px ;
		margin-bottom: 6px;
		font-size: 14px;
		color: rgb(7,17,27);
	}
	.inf-text{
		line-height: 24px;
		padding:0 8px ;
		font-size: 12px;
		color: rgb(77,85,93);
	}
	.s-rating{
		padding-top:18px ;
	}
	.s-title{
		width: 100%;
		box-sizing: border-box;
		line-height: 0.6rem;
		padding: 0 0.6rem;
		height: 0.6rem;
		font-size: 0.3rem;
		text-align: left;
		color: rgb(7,17,27);
		margin-top: 0.3rem;
	}
	.s-title1{
		width: 100%;
		box-sizing: border-box;
		line-height: 0.6rem;
		padding: 0 0.6rem;
		font-size: 0.3rem;
		text-align: left;
		color: rgb(7,17,27);
		margin-top: 0.3rem;
	}
</style>